<template>
    <div>
        <el-dialog title="添加规格参数" :visible.sync="dialogVisible" width="50%">
            <Tree @sendTree="sendTree"></Tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" :disabled="disabled" @click="innerVisible = true">确定并添加分组</el-button>
            </span>

            <el-dialog width="45%" title="商品规格参数配置" :visible.sync="innerVisible" append-to-body>
                <div class="title">当前选中的商品：{{ treeData.name }}</div>
                <el-button type="primary" @click="addDomain">新增规格列表</el-button>
                <hr />

                <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px"
                    class="demo-dynamic">
                    <el-form-item v-for="(item, index) in dynamicValidateForm.list" :label="item.title + index"
                        :key="index" :prop="item.title" :rules="{
                            required: true, message: '域名不能为空', trigger: 'blur'
                        }">
                        <div class="item">
                            <el-input v-model="item.title"></el-input>
                            <el-button @click.prevent="addChildDomain(index)">添加子组</el-button>
                            <el-button @click.prevent="removeDomain(index)">删除</el-button>
                        </div>

                        <el-form-item v-for="(ele, i) in item.children" :label="ele.title + i" :key="i"
                            :prop="ele.title" :rules="{
                                required: true, message: '域名不能为空', trigger: 'blur'
                            }">
                            <div class="item">
                                <el-input v-model="ele.title"></el-input>
                                <el-button @click.prevent="removeChildDomain(index, i)">删除</el-button>
                            </div>
                        </el-form-item>

                    </el-form-item>
                </el-form>


                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm('dynamicValidateForm')">确定</el-button>
                    <el-button  @click="resetForm('dynamicValidateForm')">取消</el-button>
                </span>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
import Tree from '@/views/Goods/Tree.vue';
export default {
    components: {
        Tree
    },
    data() {
        return {
            dialogVisible: false,
            innerVisible: false,
            disabled: true,
            treeData: {},
            dynamicValidateForm: {
                list: [],
            }
        }
    },
    methods: {
        sendTree(value) {
            this.treeData = value
            this.disabled = false
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.dynamicValidateForm.list);
                    //拿接口发数据
                    this.innerVisible = false
                    this.dialogVisible = false
                    this.dynamicValidateForm.list = []
                    this.disabled = true

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm() {
            this.innerVisible = false
                    this.dialogVisible = false
                    this.dynamicValidateForm.list = []
        },
        addDomain() {
            this.dynamicValidateForm.list.push({
                value: '',
                title:'',
                children:[]
            });
        },
        removeDomain(index) {
            this.dynamicValidateForm.list.splice(index, 1)
        },
        addChildDomain(index) {
            this.dynamicValidateForm.list[index].children.push({
                value:'',
                title:''
            })
        },
        removeChildDomain(index, i) {
            this.dynamicValidateForm.list[index].children.splice(i, 1)
        },

    }
}
</script>

<style scoped lang="less">
.item {
    display: flex;

    button {
        margin-left: 10px;
    }
}
</style>
